<script setup lang="ts" >
import { getVisualization } from '../../api/visualization'
//
import HorizontalBar from './components/HorizontalBar.vue'
import RadarBar from './components/RadarBar.vue'
import Relation from './components/Relation.vue'
//
import TotalData from './components/TotalData.vue'
import MapChart from './components/MapChart.vue'
//
import VerticalBar from './components/VerticalBar.vue'
import RadiueBar from './components/RadiueBar.vue'
import WordCloud from './components/WordCloud.vue'
import { ref, onMounted, onBeforeUnmount } from 'vue'
let screen = ref()
onMounted(() => {
    screen.value.style.transform = `scale(${getScale()}) translate(-50%,-50%)`
})
window.onresize = () => {
    screen.value.style.transform = `scale(${getScale()}) translate(-50%,-50%)`
}
onBeforeUnmount(() => {
    window.onresize = null

})
function getScale(w = 500, h = 755) {
    const ww = window.innerWidth / w
    const wh = window.innerHeight / h
    return ww < wh ? ww : wh //采用比例
    //ww<wh情况: 1920/1920(ww)   1080/1080(wh)
    //ww>wh情况:1920/1920(ww)   1080/1080(wh)
}

//获取数据
const data = ref(null)
const loadData = async () => {
    data.value = await getVisualization()
    // console.log(data.value)
}
loadData()
// 定时获取数据
setInterval(() => {
    loadData()
}, 8000)

</script>

<template>
    <div class="container">
        <!-- v-if="data" -->
        <div class="screen" ref="screen">
            <div class="left">
                <!-- 横向柱状图 -->
                <HorizontalBar class="left_tu1" :data="data.regionData" />
                <!-- 雷达图 -->
                <RadarBar class="left_tu2" :data="data.riskData" />
                <!-- 关系图 -->
                <Relation class="left_tu3" />
            </div>
            <div class="center">
                <!-- 数据总量 -->
                <TotalData class="center_tu1" :data="data.totalData" />
                <!-- 地图 -->
                <MapChart  :data="data.mapData"/>
            </div>
            <div class="right">
                <!-- 竖向柱状图 -->
                <VerticalBar class="right_tu1" :data="data.serverData" />
                <!-- 环形图 -->
                <RadiueBar class="right_tu2" :data="data.abnormalData" />
                <!-- 词云  -->
                <WordCloud class="right_tu2" :data="data.wordCloudData" />
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.container {
    width: 100vw;
    height: 100vh;
    background: url('@/assets/imgs/background.jpg')no-repeat;
    background-size: cover;

    .screen {
        position: fixed;
        width: 100%;
        height: 100%;
        /* background: red; */
        transform-origin: left top;
        left: 50%;
        top: 50%;
        display: flex;
        color: black;

        .left {
            width: 100%;
            height: 100%;
            flex: 1;
            opacity: .7;
            background: linear-gradient(90deg, #191654 0%, #352e3c 100%);
            display: flex;
            flex-direction: column;

            .left_tu1 {
                flex: 1;
                margin-top: 5px;
            }

            .left_tu2 {
                flex: 1;
                margin-top: 5px;
            }

            .left_tu3 {
                flex: 1;
                margin-top: 5px;
                // background-color: #191654;
            }
        }

        .center {
            flex: 3;
            opacity: .6;
            background: #1f1d3f;
            padding: 0 20px;

            .center_tu1 {
                flex: 1;
                margin-top: 5px;
                background-color: #242143;
                height: 25%;
            }

            .center_tu2 {
                flex: 4;
                margin-top: 5px;
            }

        }

        .right {
            width: 100%;
            height: 100%;
            flex: 1;
            opacity: .7;
            background: linear-gradient(90deg, #352e3c 0%, #191654 100%);

            .right_tu1 {

                flex: 1;
                margin-top: 5px;
            }

            .right_tu2 {
                flex: 1;
                margin-top: 5px;
            }

            .right_tu3 {
                flex: 1;
                margin-top: 5px;
                // background-color: #191654;
            }

        }

    }
}
</style>